import React, { Component } from "react";
import { connect } from 'dva';
import { Input, Select, Button, Form, Row, Col, Modal} from "antd";
import "./style.less";
import ResizTable from "./../../../components/Table/table";
//跳转页面所需的依赖
import { routerRedux } from 'dva/router';
import { RowRatio, ColRatio, formItemLayout, ButtonRatio } from "./../../../utils/RowUtil";

// 新增sku页面组件
import AddSku from './addSku';
import SkuDetail from './skuDetail';
// 详情页面弹出框
import PageModel from './../../../components/PageModel/pageModel';

const FormItem = Form.Item;

@Form.create()
@connect(({ list, loading }) => ({
    list,
    loading: loading.models.list,
  }))
class SkuList extends Component {

    constructor(props) {
        super(props);
        //设置初始值
        this.state = {
            tableWidth: 2200,
            isLoading: true,
            // 新增页面是否显示
            addPageVisiable: false,
            addPageTitle: '新增页面',
            // 详情页面
            detailShow: false,
            detailitle: 'sku详情页面'
        }
        // 列名 
        this.columns = [{
            title: 'sku编号',
            dataIndex: 'skuCode',
            width: 200,
        }, {
            title: '一级分类',
            dataIndex: 'firstClass',
            width: 160,
            render: (text, record, index) => {
                return (
                    <div>
                        <div>{record.firstClass.name}</div>
                        <div>{record.firstClass.brand}</div>
                        <div>{record.firstClass.code}</div>
                    </div>
                )
            }
        }, {
            title: '二级分类',
            dataIndex: 'secondClass',
            width: 160,
            render: (text, record, index) => {
                return (
                    <div>
                        <div>{record.secondClass.name}</div>
                        <div>{record.secondClass.brand}</div>
                        <div>{record.secondClass.code}</div>
                    </div>
                )
            }
        }, {
            title: '三级分类',
            dataIndex: 'threeClass',
            width: 160,
            render: (text, record, index) => {
                return (
                    <div>
                        <div>{record.threeClass.name}</div>
                        <div>{record.threeClass.brand}</div>
                        <div>{record.threeClass.code}</div>
                    </div>
                )
            }
        },{
            title: '商品名称',
            dataIndex: 'productName',
            width: 200,
            render: (text, record, index) => {
                return (
                    <div>
                        <div>{record.productName.name}</div>
                        <div>{record.productName.brand}</div>
                        <div>{record.productName.code}</div>
                    </div>
                )
            }
        },{
            title: '生产厂家',
            dataIndex: 'manufacturer',
            width: 200,
            render: (text, record, index) => {
                return (
                    <div>
                        <div>{record.manufacturer.name}</div>
                        <div>{record.manufacturer.code}</div>
                    </div>
                )
            }
        }, {
            title: '品牌/品类',
            dataIndex: 'brand',
            width: 200,
            render: (text, record, index) => {
                return (
                    <div>
                        <div>{record.brand.name}</div>
                        <div>{record.brand.code}</div>
                    </div>
                )
            }
        }, {
            title: '产地',
            dataIndex: 'productPlace',
            width: 200,
            render: (text, record, index) => {
                return (
                    <div>
                        <div>{record.productPlace.name}</div>
                        <div>{record.productPlace.code}</div>
                    </div>
                )
            }
        },{
            title: '规格',
            dataIndex: 'spec',
            width: 260,
            render: (text, record, index) => {
                return (
                    <div>
                        <div>{record.spec.name}</div>
                        <div>{record.spec.code}</div>
                    </div>
                )
            }
        }, {
            title: '描述',
            dataIndex: 'description',
            width: 260
        },{
            title: '操作',
            dataIndex: 'operat',
            render: (text, record, index) => {
                return (
                    <div>
                        <Button type="primary" onClick={() => this.toDetail(record, index)}>查看详情</Button>
                        <Button type="danger" onClick={() => this.toDetail(record, index)}>删除</Button>
                    </div>
                );
            }
        }];
    }
    //点击查看详情的时候触发
    toDetail(text, index) {
        console.log(text);
        const { dispatch } = this.props;
        dispatch({
            type: 'list/queryAddSkuDetail',
            payload: {
                skuId: text.id
            },
            url: '/web/sku/getSkuInfo'
        });
        this.setState({
            detailShow: true
        });
    }

    componentWillMount() {
        this.showList(); 
    }

    //展示页面
    showList() {
        const { dispatch } = this.props;
        dispatch({
            type: 'list/fetch',
            payload: {
              
            },
            url: '/web/sku/getSkuList'
        });
    }

    // 关闭模态框
    closeAddModel = () => {
        console.log("触发关闭");
        this.setState({
            addPageVisiable: false
        });
    }

    // 关闭详情页面的弹出框
    closeDetailModel = () => {
        console.log("触发关闭");
        this.setState({
            detailShow: false
        });
    }

    //进入sku页面
    addSku() {
        const { dispatch } = this.props;
        dispatch(routerRedux.push({ 
            pathname: '/shopping/addSku'
        }));
    }

    // 显示sku弹出框
    showAddSkuPage = () => {
        this.setState({
            addPageVisiable: true
        });
    }

    handleSearch = (e) => {
        this.setState({
            isLoading: true
        });
        e.preventDefault();
        const { form, dispatch } = this.props;
        form.validateFields((err, values) => {
            dispatch({
                type: 'list/fetch',
                payload: {
                  ...values
                },
                url: '/web/sku/getSkuList'
            });
        });
        this.setState({
            isLoading: false
        });
    }

    render() {
        const { list } = this.props;
        const data = list.list && list.list.data && list.list.data.list ? list.list.data.list : [];
        const total = list.list && list.list.data && list.list.data.info && list.list.data.info.total ? list.list.data.info.total : 0;
        //循环遍历fullName数据
        data.map(function(item, index) {
            item.firstClass = JSON.parse(item.fullName)[0];
            item.secondClass = JSON.parse(item.fullName)[1];
            item.threeClass = JSON.parse(item.fullName)[2];
            item.productName = JSON.parse(item.fullName)[3];
            item.manufacturer = JSON.parse(item.fullName)[4];
            item.brand = JSON.parse(item.fullName)[5];
            item.productPlace = JSON.parse(item.fullName)[6];
            item.spec = JSON.parse(item.fullName)[7];
        });
                        
        const { getFieldDecorator } = this.props.form;
        return (
            <div className="jxf_container">
               {/* // form表单区域 */}
               <div className="formArea">
                    <Form
                        className="ant-advanced-search-form"
                        onSubmit={this.handleSearch}
                        style={{ padding: 20 }}
                    >
                        <Row { ...RowRatio }>
                            <Col {...ColRatio}>
                                <FormItem label="SKU" {...formItemLayout}>
                                    {getFieldDecorator("sku", {
                                    rules: [{
                                        required: false,
                                        message: '请输入SKU',
                                    }],
                                    })(
                                    <Input size="large" placeholder="请输入SKU" />
                                    )}
                                </FormItem>
                            </Col>
                            <Col {...ButtonRatio}>
                                <Button type="primary" style={{ marginLeft: 20 }} htmlType="submit" size="large">搜索</Button>
                                <Button type="primary" style={{ marginLeft: 20 }} onClick={() => this.props.form.resetFields()} size="large">重置</Button>
                            </Col>
                        </Row>
                    </Form>
               </div>
               <div>
                 <div className="formTitle">数据列表 <i className="likeButton" onClick={this.showAddSkuPage}>新增SKU</i></div>
                 <ResizTable 
                    dataSource={data} 
                    columns={this.columns} 
                    width={this.state.tableWidth} 
                    total={total} 
                    isLoading={this.state.isLoading} 
                    dispatch={this.props.dispatch}
                    url="/web/sku/getSkuList"
                    isRequest={1}
                    />
               </div>
               {/* 新增页面的弹出框 */}
               <PageModel
                    isModelShow={this.state.addPageVisiable} 
                    title={this.state.addPageTitle}
                    closeModel={this.closeAddModel}
               >
                    <div className="addSku">
                        <AddSku />
                    </div>
               </PageModel>
               {/* 详情页面弹出框 */}
               <PageModel
                    isModelShow={this.state.detailShow} 
                    title={this.state.detailitle}
                    closeModel={this.closeDetailModel}
               >
                    <SkuDetail />
               </PageModel>
            </div>
        );
    }

    componentDidMount() {
        this.setState({
            isLoading: false
        });
    }
}

export default SkuList;